/* eslint-disable eqeqeq */
import Limit from '@/components/Limit';
import { Avatar, Popconfirm, Tooltip } from 'antd';
import dayjs from 'dayjs';
import { useEffect, useRef, useState } from 'react';
import { difftime } from '@/utils/time';

const ReplyChildCard = ({
  userName,
  userHeadUrl,
  userId,
  bereplyUserName,
  atUserList,
  token,
  reply,
  setdoreply,
  id,
  msgId,
  doreply,
  createTime,
  curitem,
  scrollRef,
}) => {
  const intoRef = useRef();
  const scrollToTargetDiv = () => {
    if (scrollRef.current && intoRef.current) {
      const targetDivOffset = intoRef.current.offsetTop;
      scrollRef?.current?.view?.scroll({
        top: targetDivOffset,
        left: 0,
        behavior: 'smooth',
      });

    }
  };

  useEffect(() => {
    if (curitem?.itemMsgId == id) {
      scrollToTargetDiv();
    }
  }, [curitem?.itemMsgId]);

  return (
    <div
      style={{
        overflow: 'hidden',
        display: 'flex',
        transition: 'all 0.2s',
        borderBottom: `1px solid ${token.colorBgThird}`,
        padding: '0px 12px',
        cursor: "pointer",
        backgroundColor: doreply?.curitemid === id ? 'rgba(0, 132, 255, 0.1)' : 'transparent',
        borderRadius: doreply?.curitemid === id ? 12 : 0
      }}
      ref={intoRef}
      onClick={async (e) => {
        e.stopPropagation();
        await setdoreply({
          name: userName,
          id: userId,
          curid: msgId,
          curitemid: id,
          type: 'reply',
        });
        scrollToTargetDiv();
      }}
    >
      <div style={{ flex: 1 }}>
        <div className="spread" style={{ height: 40, marginBottom: 0 }}>
          <div className="center">
            <Tooltip title={userName}>
              <Avatar size="small" src={userHeadUrl || null}>
                {userName?.charAt(0)}
              </Avatar>
            </Tooltip>
            <span style={{ color: curitem?.msgId == id ? '#ff4800' : '#333333', textIndent: 12 }}>
              回复&nbsp;<b>{bereplyUserName}</b>
            </span>
          </div>
        </div>
        <div
          style={{
            marginBottom: 12,
            paddingBottom: 10,
          }}
        >
          <Limit content={reply}></Limit>
          <div className="spread" style={{ color: '#666', fontSize: 12, paddingTop: 12 }}>
            <span>{difftime(dayjs(), dayjs(createTime))}</span>
            <span>
              <b style={{ display: atUserList && atUserList?.length > 0 ? 'inline' : 'none' }}>
                @
              </b>
              {atUserList?.map?.((it) => (
                <span key={it?.name} style={{ padding: '0 4px' }}>
                  {it?.name}
                </span>
              ))}
            </span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ReplyChildCard;
